<template>
  <!-- 选择服务，列表页 -->
  <view class="select-serve-container">
    <!-- 主要列表内容，两栏分类列表 -->
    <view class="main flex flex-ai-c u-skeleton">
      <!-- 左侧滚动部分 -->
      <scroll-view
        scroll-y
        scroll-with-animation
        class="left-box scroll-box u-skeleton-rect"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          :id="'p' + item.id"
          class="tab-item-text flex flex-ai-c flex-jc-c u-skeleton-rect"
          :class="currentNum === index ? 'is-active' : ''"
          @click.stop="setIntoId(item.id, index)"
        >
          <text class="mr-10">{{ item.maintenance_Type_Name }}</text>
          <uni-badge
            v-show="item.serCount !== 0"
            :text="item.serCount"
            type="error"
            size="small"
            class="badge"
          ></uni-badge>
        </view>
      </scroll-view>

      <!-- 右侧滚动部分 -->
      <scroll-view
        scroll-y
        scroll-with-animation
        :scroll-into-view="intoId"
        @scroll="scroll"
        class="right-box scroll-box"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          :id="'to' + item.id"
          class="right-item u-skeleton-rect"
        >
          <u-divider
            :fontSize="30"
            :half-width="100"
            color="#666"
            border-color="#eee"
            :margin-top="30"
            :margin-bottom="30"
          >
            {{ item.maintenance_Type_Name }}
          </u-divider>
          <!-- 各个服务列表 -->
          <view class="serve-list">
            <!-- 
              洗车，显示这一块布局的内容
              通过has_Children字段，判断是否有children列表
             -->
            <template v-if="!item.has_Children">
              <view class="serve-item">
                <!-- 服务的卡片布局 -->
                <view
                  v-for="(serItem, index2) in item.maintenanceGoodsLists"
                  :key="index2"
                  class="serve-item-card flex"
                >
                  <!-- 服务图片 -->
                  <view class="img-box u-skeleton-fillet">
                    <u-image
                      :src="serItem.pic_URL || errorImg"
                      mode="widthFix"
                      class="img"
                      width="100"
                      height="100"
                      border-radius="10"
                      :lazy-load="true"
                      :error-icon="errorImg"
                    ></u-image>
                  </view>

                  <view class="right-content">
                    <!-- 服务名称 -->
                    <view class="name color-666 font-26 font-bold">
                      <text class="m-line-text-2 u-skeleton-fillet">{{
                        serItem.goods_Name
                      }}</text>
                    </view>

                    <!-- 服务价格 -->
                    <view class="price-box flex flex-jc-sb flex-ai-fe">
                      <view class="price-text font-24 u-skeleton-fillet">
                        <text class="color-EB5C02 font-bold"
                          >￥<text class="font-26">{{
                            serItem.sale_Price
                          }}</text></text
                        >
                        <!-- 原价 -->
                        <text
                          class="color-999 serve-fee"
                          v-if="serItem.original_Price > 0"
                          >￥{{ serItem.original_Price }}</text
                        >
                      </view>

                      <!-- 计数器 -->
                      <view class="num-box flex flex-ai-c u-skeleton-fillet">
                        <view
                          v-show="serItem.amount !== 0"
                          class="btn less"
                          @click="less(serItem, item)"
                        >
                          <u-icon name="minus"></u-icon>
                        </view>
                        <input
                          v-show="serItem.amount !== 0"
                          type="number"
                          v-model="serItem.amount"
                          class="cont"
                        />
                        <view class="btn add" @click="add(serItem, item)">
                          <u-icon
                            name="plus"
                            size="24"
                            color="#3d3d3d"
                          ></u-icon>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>

            <!-- 其他服务显示这一块布局内容 -->
            <template v-else>
              <view
                v-for="(
                  serItem, index2
                ) in item.maintenanceTypeAndGoodsChildList"
                :key="index2"
                class="serve-item"
              >
                <view class="serve-item-radio">
                  <!-- 是套餐，就可勾选单选 -->
                  <label
                    v-if="item.showMulSelected"
                    class="radio-box"
                    @click="selectedServe(serItem, item)"
                  >
                    <view class="icon-radio flex flex-ai-c flex-jc-sb">
                      <text class="font-28 color-333">
                        {{ serItem.maintenance_Type_Name }}
                      </text>
                      <i-icon
                        v-show="!serItem.isChecked"
                        icon="icontuoyuan"
                        size="34rpx"
                        color="#999"
                      ></i-icon>
                      <i-icon
                        v-show="serItem.isChecked"
                        icon="iconxuanzhong"
                        size="34rpx"
                        color="#FBD220"
                      ></i-icon>
                    </view>
                  </label>

                  <!-- 不是套餐，直接显示标题 -->
                  <view v-else class="title">
                    {{ serItem.maintenance_Type_Name }}
                  </view>

                  <!-- 没有勾选按钮的服务的卡片布局 显示 -->
                  <view v-show="!item.showMulSelected">
                    <view
                      v-for="(
                        serItemSub, index3
                      ) in serItem.maintenanceGoodsLists"
                      :key="index3"
                      class="serve-item-card flex"
                    >
                      <!-- 服务图片 -->
                      <view class="img-box">
                        <u-image
                          :src="serItemSub.pic_URL || errorImg"
                          mode="widthFix"
                          class="img"
                          width="100"
                          height="100"
                          border-radius="10"
                          :lazy-load="true"
                          :error-icon="errorImg"
                        ></u-image>
                      </view>

                      <view class="right-content">
                        <!-- 服务名称 -->
                        <view class="name color-666 font-26 font-bold">
                          <text class="m-line-text-2">
                            {{ serItemSub.goods_Name }}
                          </text>
                        </view>

                        <!-- 服务价格 -->
                        <view class="price-box flex flex-jc-sb flex-ai-fe">
                          <view class="price-text font-24">
                            <text class="color-EB5C02 font-bold">
                              ￥
                              <text class="font-26">
                                {{ serItemSub.sale_Price }}
                              </text>
                            </text>
                            <!-- 原价 -->
                            <text
                              class="color-999 serve-fee"
                              v-if="serItemSub.original_Price > 0"
                            >
                              ￥{{ serItemSub.original_Price }}
                            </text>
                          </view>

                          <!-- 计数器 -->
                          <view class="num-box flex flex-ai-c">
                            <view
                              v-show="serItemSub.amount !== 0"
                              class="btn less"
                              @click="less(serItemSub)"
                            >
                              <u-icon name="minus"></u-icon>
                            </view>
                            <input
                              v-show="serItemSub.amount !== 0"
                              type="number"
                              v-model="serItemSub.amount"
                              class="cont"
                            />
                            <view
                              class="btn add"
                              @click="add(serItemSub, item)"
                            >
                              <u-icon
                                name="plus"
                                size="24"
                                color="#3d3d3d"
                              ></u-icon>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 有勾选按钮的服务的卡片布局 显示 -->
                  <view v-show="item.showMulSelected">
                    <view
                      v-for="(
                        serItemSub, index3
                      ) in serItem.maintenanceGoodsLists"
                      :key="index3"
                      class="serve-item-card flex"
                    >
                      <!-- 服务图片 -->
                      <view class="img-box">
                        <u-image
                          :src="serItemSub.pic_URL || errorImg"
                          mode="widthFix"
                          class="img"
                          width="100"
                          height="100"
                          border-radius="10"
                          :lazy-load="true"
                          :error-icon="errorImg"
                        ></u-image>
                      </view>

                      <view class="right-content">
                        <!-- 服务名称 -->
                        <view class="name color-666 font-26 font-bold">
                          <text class="m-line-text-2">
                            {{ serItemSub.goods_Name }}
                          </text>
                          <text
                            class="change"
                            v-if="!serItemSub.isVisualGoods"
                            @click="onChangeGoods(serItemSub, item)"
                            >变更</text
                          >
                        </view>

                        <!-- 服务价格 -->
                        <view class="price-box flex flex-jc-sb flex-ai-fe">
                          <view class="price-text font-24">
                            <text class="color-EB5C02 font-bold">
                              ￥
                              <text class="font-26">
                                {{ serItemSub.sale_Price }}
                              </text>
                            </text>
                            <!-- 原价 -->
                            <text
                              class="color-999 serve-fee"
                              v-if="serItemSub.original_Price > 0"
                            >
                              ￥{{ serItemSub.original_Price }}
                            </text>
                          </view>

                          <!-- 计数器 -->
                          <view
                            class="num-box flex flex-ai-c"
                            v-if="
                              item.maintenance_Type_Name != '小保养' &&
                              item.maintenance_Type_Name != '大保养'
                            "
                          >
                            <view
                              v-show="serItemSub.amount !== 0"
                              class="btn less"
                              @click="less(serItemSub, serItem)"
                            >
                              <u-icon
                                name="minus"
                                size="20"
                                color="#3d3d3d"
                              ></u-icon>
                            </view>
                            <input
                              v-show="serItemSub.amount !== 0"
                              type="number"
                              v-model="serItemSub.amount"
                              class="cont"
                              disabled
                            />
                            <view
                              class="btn add"
                              @click="add(serItemSub, item)"
                            >
                              <u-icon
                                name="plus"
                                size="24"
                                color="#3d3d3d"
                              ></u-icon>
                            </view>
                          </view>
                          <view class="num-box flex flex-ai-c" v-else
                            ><text v-show="serItemSub.amount !== 0"
                              >x{{ serItemSub.amount }}</text
                            ></view
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </scroll-view>
    </view>

    <!--引用组件-->
    <u-skeleton
      :loading="loading"
      :animation="true"
      bg-color="#FFF"
    ></u-skeleton>

    <!-- 底部提交栏 -->
    <footer-bar
      :cartList="cartList"
      :amount="leftCount"
      @onChangeNum="onChangeNum"
      @submit="submit"
    ></footer-bar>
  </view>
</template>

<script>
import uniBadge from '@/components/uni-badge/uni-badge.vue'
import footerBar from '@/components/afterSales/footerBar.vue'

export default {
  components: { uniBadge, footerBar },
  data() {
    return {
      loading: false, // 加载
      list: [], // 列表数据，左侧取第一层，右侧取全部
      intoIdLeft: 'p1', // 左侧滚动到对应位置的id
      intoId: 'to1', // 右侧滚动到对应位置的id
      isLeftClick: false,
      currentNum: 0,
      // 选中的值
      checkedVal: {
        id: '',
        itemNum: 1,
        amount: 1,
      },
      topList: [], // 记录右侧标题到顶部距离
      checkedList: [], // 选中值的列表
      cartList: [], // 购物车列表
      // isChecked: '', // 是否勾选
      typeIndex: 0, // 上一页选择订单类型传入的参数
      carId: '', //车辆id
      errorImg:
        'https://files.yzsheng.com/bussiness/imgs/afterSales/default.png',
      dataKey: 1,
    }
  },

  computed: {
    leftCount() {
      let sum = 0
      this.list.forEach((item) => {
        sum += item.serCount
      })
      return sum
    },
  },

  onLoad(e) {
    this.typeIndex = parseInt(e.index)
    this.carId = this.$store.state.afterSales.carInfo.carId
    // 监听替换商品
    uni.$on('maintenanceReplaceProduct', (data) => {
      if (data) {
        this.replaceProduct(data)
      }
    })
  },

  created() {
    this.getList(() => {
      this.handleAutoCheckedGoods()
      this.$nextTick(() => {
        this.handleIntoId()
      })
    })
  },

  methods: {
    // 获取右侧标题节点距顶部距离
    getNodesInfo() {
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.right-item')
        .boundingClientRect()
        .exec((res) => {
          let nodes = res[0]
          let rel = []
          nodes.map((item) => {
            rel.push(item.top - 22)
          })
          console.log('节点打印', rel)
          this.topList = rel
        })
    },
    // 获取列表数据
    async getList(cb) {
      try {
        this.loading = true
        const res = await this.$api.afterSales.GetMaintenanceTypeAndGoodsList({
          configuration_Id: this.carId,
        })
        // 添加勾选字段
        res.data.forEach((item) => {
          item.serCount = 0
          if (item.has_Children && item.showMulSelected) {
            if (
              item.maintenance_Type_Name === '小保养' ||
              item.maintenance_Type_Name === '大保养'
            ) {
              let arr = []
              item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
                ser.maintenanceGoodsLists.forEach((serItem) => {
                  arr.push(serItem)
                })
              })
              let temp = item.maintenanceTypeAndGoodsChildList[0]
              temp.id = item.id
              temp.maintenanceGoodsLists = arr
              temp.maintenance_Type_Name = item.maintenance_Type_Name + '服务'
              item.maintenanceTypeAndGoodsChildList = [temp]
            } else {
              item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
                ser.isChecked = false
              })
            }
          } else if (item.has_Children && !item.showMulSelected) {
            item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
              ser.showMulSelected = false
            })
          }
        })
        this.handleAddAmount(res.data) // 递归给服务项添加数量字段
        this.intoId = 'to' + res.data[0].id
        this.list = res.data
        this.$nextTick(() => {
          this.getNodesInfo()
        })
        this.loading = false

        cb()
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },

    // 递归给数组添加服务数量的字段
    handleAddAmount(list) {
      list.forEach((item) => {
        if (item.showMulSelected) {
          // 结束条件：has_Children为false
          if (item.has_Children) {
            this.handleAddAmount(item.maintenanceTypeAndGoodsChildList)
          } else {
            if (item.maintenanceGoodsLists) {
              item.maintenanceGoodsLists.forEach((ser) => {
                ser.amount = 0
                ser.key = this.dataKey
                this.dataKey++
              })
            }
          }
        } else {
          // 结束条件：has_Children为false
          if (item.has_Children) {
            this.handleAddAmount(item.maintenanceTypeAndGoodsChildList)
          } else {
            if (item.maintenanceGoodsLists) {
              item.maintenanceGoodsLists.forEach((ser) => {
                ser.amount = 0
                ser.key = this.dataKey
                this.dataKey++
              })
            }
          }
        }
      })
    },

    // 获取上一页选择订单类型页面传入的参数，匹配跳转到对应列表项
    handleIntoId() {
      let id = this.list[this.typeIndex].id
      this.setIntoId(id, this.typeIndex)
    },

    // 点击左侧列表项，右侧跳到指定位置
    setIntoId(id, i) {
      this.intoId = 'to' + id
      this.currentNum = i
      this.isLeftClick = true
    },

    // 右侧滚动事件
    scroll(e) {
      // 如果点击了左侧栏，则需阻止滚动动作
      if (this.isLeftClick) {
        this.isLeftClick = false
        return
      }
      // 获取右侧节点的标题距顶部距离
      let scrollTop = e.target.scrollTop
      // 遍历距离所有节点距离顶部的数组
      for (let i = 0; i < this.topList.length; i++) {
        let h1 = this.topList[i]
        let h2 = this.topList[i + 1]
        // 比较记录到的节点和滚动到的节点距离是否在范围内
        // 如果滚动到了标题节点的范围内，则将左侧也跳到制定位置
        if (scrollTop > h1 && scrollTop < h2) {
          this.currentNum = i
        }
        //解决滚动到最后选项左侧不会选中
        let length = this.topList.length - 1
        if (scrollTop >= this.topList[length]) {
          this.currentNum = length
        }
      }
    },

    // 减
    less(item, pItem) {
      // 为勾选的，数量为1就不能减少了
      if (item.amount < 1) return
      item.amount -= 1
      this.handleCheckLength() // 计算已选数量
    },

    // 加
    add(item, pItem) {
      item.amount += 1
      // 添加数量判断，如果不是勾选服务项
      if (!pItem.showMulSelected) {
        this.handleCheckLength()
      } else {
        this.handleCheckLength()
      }
    },

    // 选择服务，勾选服务
    selectedServe(item, pItem) {
      item.isChecked = !item.isChecked
      item.maintenanceGoodsLists.map((i) => {
        i.amount = item.isChecked ? 1 : 0
      })
      this.handleCheckLength()
    },

    // 计算左侧列表已选数量 和 购物车列表
    handleCheckLength() {
      let checkedList = [],
        cartList = [],
        cartListItem = { maintenanceGoodsLists: [] }

      // 遍历数组，查询勾选项有几个
      this.list.forEach((item) => {
        item.serCount = 0 // 左侧选中数量清0
        // 如果是勾选项
        if (item.has_Children && item.showMulSelected) {
          item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
            // 如果是勾选，判断是否勾选
            let isChecked = ser.maintenanceGoodsLists.some((i) => {
              return i.amount > 0
            })
            if (ser.maintenanceGoodsLists.length > 0) {
              ser.isChecked = isChecked
            }
            if (ser.isChecked && isChecked) {
              item.serCount += 1 // 左侧选中数量重新计算
              cartListItem.id = item.id
              cartListItem.maintenance_Type_Name = item.maintenance_Type_Name
              ser.maintenanceGoodsLists.forEach((serItem) => {
                if (serItem.amount > 0) {
                  checkedList.push(serItem)
                  cartListItem.maintenanceGoodsLists.push(serItem)
                }
              })
              cartList.push(cartListItem)
              cartListItem = { maintenanceGoodsLists: [] }
            }
          })
          // 处理美容服务已选数量，不是勾选项
        } else if (item.has_Children && !item.showMulSelected) {
          item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
            ser.maintenanceGoodsLists.forEach((serItem) => {
              if (serItem.amount !== 0) {
                item.serCount += 1 // 左侧选中数量重新计算
                checkedList.push(serItem)
                cartListItem.maintenanceGoodsLists.push(serItem)
              }
            })
            if (cartListItem.maintenanceGoodsLists.length) {
              cartListItem.id = item.id
              cartListItem.maintenance_Type_Name = item.maintenance_Type_Name
              cartList.push(cartListItem)
              cartListItem = { maintenanceGoodsLists: [] }
            }
          })
          // 处理洗车已选数量  不是勾选项
        } else {
          item.maintenanceGoodsLists.forEach((ser) => {
            if (ser.amount !== 0) {
              item.serCount += 1 // 左侧选中数量重新计算
              checkedList.push(ser)
            }
          })
        }
      })
      this.cartList = cartList
      this.checkedList = checkedList
      // this.screenSelectType(checkedList)
    },

    // 继续添加商品，进入当前页需处理自动勾选上 来自新建订单页的添加弹窗列表的商品
    handleAutoCheckedGoods() {
      let list = JSON.parse(
        JSON.stringify(this.$store.state.afterSales.checkedServeList)
      )

      // 如果有id，则说明是选择的商品，如果没有id：表示手动填写的商品
      if (list[0].id) {
        this.checkedList = list
      } else {
        list.splice(0, 1)
        this.checkedList = list
      }

      // 根据store里的已选商品列表，将匹配到的自动勾上或选上
      let dgCheckedList = (arr) => {
        arr.forEach((item) => {
          // 结束条件：has_Children为false
          if (item.has_Children) {
            dgCheckedList(item.maintenanceTypeAndGoodsChildList)
          } else {
            if (item.maintenanceGoodsLists) {
              item.maintenanceGoodsLists.forEach((ser) => {
                let findData = this.checkedList.find((c) => c.id === ser.id) // 查找洗车项
                if (findData) {
                  // 给找到的项赋值选择数量值
                  ser.amount = findData.amount

                  // 查找到匹配项 且 有勾选属性，就把此项勾上
                  if (item.hasOwnProperty('isChecked')) {
                    item.isChecked = true
                  }
                }
              })
            }
          }
        })
      }
      dgCheckedList(this.list)
      this.handleCheckLength()
    },

    // 点击变更
    onChangeGoods(item, pitem) {
      uni.navigateTo({
        url: `/pages_afterSales/selectServe/replaceProduct?id=${item.id}&carId=${this.carId}&maintenanceTypeId=${item.maintenance_Type_Id}&pid=${pitem.id}`,
      })
    },

    // 替换产品
    replaceProduct(data) {
      let res = data.data
      let num = 0
      try {
        this.list.map((item, idx) => {
          if (item.has_Children && item.showMulSelected) {
            item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
              if (
                ser.maintenanceGoodsLists &&
                ser.maintenanceGoodsLists.length > 0
              ) {
                ser.maintenanceGoodsLists.forEach((sItem, index) => {
                  if (
                    sItem.maintenance_Type_Id === data.maintenance_Type_Id &&
                    item.id === data.pid
                  ) {
                    res[num].amount = sItem.amount
                    Object.assign(sItem, res[num])
                    num++
                    // sItem.amount = 10
                    if (num >= res.length) {
                      throw new Error('ending')
                    }
                  }
                })
              }
            })
          }
        })
      } catch (e) {
        this.handleCheckLength()
        //TODO handle the exception
      }
    },

    // 提交
    submit() {
      let list = this.checkedList.map((item) => {
        item.added_Rate = item.added_Rate * 100
        return item
      })
      this.$store.commit('afterSales/setCheckedServeList', list)
      uni.navigateBack({
        delta: 2,
      })
    },

    // 购物车弹窗数量修改
    onChangeNum(data) {
      let current = null,
        pitem = null
      this.list.map((item) => {
        // 如果是勾选项
        if (item.has_Children && item.showMulSelected) {
          item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
            if (ser.maintenanceGoodsLists) {
              ser.maintenanceGoodsLists.forEach((serItem) => {
                if (data.type === 'clear') {
                  ser.isChecked = false
                  serItem.amount = 0
                } else {
                  if (
                    serItem.id === data.data.id &&
                    item.id === data.pid &&
                    serItem.key === data.data.key
                  ) {
                    current = serItem
                    pitem = item
                    if (data.type === 'less') {
                      serItem.amount -= 1
                    } else {
                      serItem.amount += 1
                    }
                  }
                }
              })
            }
          })
        } else if (item.has_Children && !item.showMulSelected) {
          item.maintenanceTypeAndGoodsChildList.forEach((ser) => {
            ser.maintenanceGoodsLists.forEach((serItem) => {
              if (data.type === 'clear') {
                serItem.amount = 0
              } else {
                if (
                  serItem.id === data.data.id &&
                  item.id === data.pid &&
                  serItem.key === data.data.key
                ) {
                  current = serItem
                  pitem = item
                  if (data.type === 'less') {
                    serItem.amount -= 1
                  } else {
                    serItem.amount += 1
                  }
                }
              }
            })
          })
        } else {
          item.maintenanceGoodsLists.map((ser) => {
            if (data.type === 'clear') {
              ser.amount = 0
            } else {
              if (
                ser.id === data.data.id &&
                item.id === data.pid &&
                serItem.key === data.data.key
              ) {
                current = ser
                pitem = item
                if (data.type === 'less') {
                  ser.amount -= 1
                } else {
                  ser.amount += 1
                }
              }
            }
          })
        }
      })

      this.handleCheckLength()

      // if(data.type === 'less') {
      //   this.less(current, pitem)
      // }
      // if(data.type === 'add') {
      //   this.add(current, pitem)
      // }
    },
  },

  onUnload() {
    uni.$off('maintenanceReplaceProduct')
  },
}
</script>

<style lang="scss" scoped>
.select-serve-container {
  // #ifndef H5
  height: 100vh;
  // #endif

  // #ifdef H5
  height: calc(100vh - 88rpx);
  // #endif

  padding-bottom: 98rpx;
  background-color: #f4f4f4;
  overflow: hidden;

  .main {
    height: 100%;
    padding-top: 14rpx;
  }

  // 区域滚动
  .scroll-box {
    height: 100%;
  }

  // 左侧滚动部分
  .left-box {
    width: 180rpx;
    background-color: #fff;

    .tab-item-text {
      position: relative;
      height: 94rpx;
      padding-left: 12rpx;
      font-size: 28rpx;
      color: #666666;

      & + .tab-item-text {
        border-top: 1px solid #eee;
      }

      &::before {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: '';
        width: 12rpx;
        height: 100%;
        background-color: #fff;
      }

      &.is-active {
        background-color: #f4f4f4;
        color: #fbb000;

        &::before {
          background-color: #fbb000;
        }
      }
    }
  }

  // 右侧滚动部分
  .right-box {
    flex: 1;
    margin: 0 22rpx;
    background-color: #fff;

    .right-item {
    }

    // 服务列表
    .serve-list {
      .serve-item {
        .serve-item-radio {
          padding: 20rpx;
        }
      }

      // 服务卡片布局样式
      .serve-item-card {
        padding: 20rpx 0 20rpx 20rpx;

        // 服务图片
        .img-box {
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
          overflow: hidden;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        // 右边内容
        .right-content {
          flex: 1;
          padding-left: 15rpx;

          .name {
            display: flex;
            align-items: center;
            .m-line-text-2 {
              display: block;
              flex: 1;
              color: #333;
            }
            .change {
              font-size: 26rpx;
              color: #799cf2;
              margin-left: 30rpx;
            }
          }
        }

        // 价格部分
        .price-box {
          margin-top: 24rpx;

          // 原价，中间有删除横线
          .serve-fee {
            margin-left: 10rpx;
            text-decoration: line-through;
          }
        }

        // 计数器
        .num-box {
          height: 40rpx;

          .btn {
            width: 40rpx;
            // height: 40rpx;
            // line-height: 40rpx;
            text-align: center;
            font-size: 30rpx;
            color: #999;
            border-radius: 8rpx;
          }
          .cont {
            width: 40rpx;
            height: 40rpx;
            margin: 0 16rpx;
            border-radius: 10rpx;
            text-align: center;
          }
          // 减号
          .less {
            border: 1px solid #ffe23e;
          }
          .less-gray {
            border-color: #eee;
            color: #ddd;
          }
          // 加号
          .add {
            background: #ffe23e;
          }
        }
      }
    }
  }
}
</style>
